<!-- register.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form id="registerForm">
        <input type="text" name="login_name" placeholder="Username" required>
        <input type="password" name="passwd" placeholder="Password" required>
        <button type="submit">Register</button>
    </form>
    <script>
        document.getElementById('registerForm').onsubmit = async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const response = await fetch('/users/register', {
                method: 'POST',
                body: JSON.stringify(Object.fromEntries(formData)),
                headers: { 'Content-Type': 'application/json' }
            });

            if (!response.ok) {
                const errorText = await response.text();
                console.error('Error response:', errorText);
                alert('Registration failed: ' + errorText);
                return;
            }

            const result = await response.json();
            alert(result.msg);
        };
    </script>
</body>
</html>